<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏示例</title>
<style>
  .navbar {
    background-color: white; /* 背景颜色 */
    overflow: hidden; /* 清除浮动 */
  }
  .navbar-top {
    background-color:#ffcc00; /* 黄色背景 */
    height: 1px; /* 黄线的高度 */
    width: 500px; 
  }
  .navbar a {
    float: left; /* 浮动到左侧 */
    display: block;
    color:black; /* 文字颜色 */
    text-align: center; /* 文字居中 */
    padding: 14px 16px; /* 内边距 */
    text-decoration: none; /* 去掉下划线 */
  }
  .navbar a:hover {
    background-color: #ddd; /* 鼠标悬停时的背景颜色 */
    color: black; /* 鼠标悬停时的文字颜色 */
  }
 
</style>
</head>
<body>

<div class="navbar-top"></div>
<div class="navbar">
  <a href="#home">首页</a>
  <a href="#sina">手机新浪网</a>
  <a href="#client">移动客户端</a>
  <a href="#blog" >博客</a>
  <a href="#weibo">微博</a>
  <a href="#follow">关注我</a>
</div>

</body>
</html>